<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .admin{
            /* display: block; */
            margin: 5px 0;
        }
        .input{
            width:280px;
            height: 300px;
            box-shadow: 0 0 10px rgb(0 ,0 , 0 ,0.2);
            padding-top: 30px;
            padding-left: 50px;
            /* text-align: center; */
            /* width: 320px; */
            margin: 30px auto;
            box-shadow: 0 0 10px rgb(0 ,0 , 0 ,0.2);
            /* float: left; */
        }
        .box{
            width:1100px;
            /* height:320px; */
            margin: 0 auto;
            box-shadow: 0 0 10px rgb(0 ,0 , 0 ,0.2);
            /* float: left; */
            /* margin-left: 100px; */
            margin-top: 10px;
            /* margin: 50px 30px; */
        }
        .list_render{
            text-align: center;
        }
        .list_render tr{
            height: 29px;
            line-height: 29px;
            background-color:#ccc;
            font-size: 14px;
            color: #333;
        }
        .search{
            padding: 5px 0;
            background-color: salmon;
            overflow: hidden;
            width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            /* box-shadow: 0 0 10px rgb(0 ,0 , 0 ,0.2); */
        }
        .search-input{
            width: 150px;
        }
        .search p{
            font-size: 16px;
            font-weight: 400;
            display: inline-block;
            /* margin-left: 5px; */
        }
        .search-box{
            width: 180px;
        }
        .date{
            display: inline-block;
            width: 150px;
        }
        /* .update-btn,.del-btn{
            color: ;
        } */
        .update-box{
            display: none;
            position: fixed;
            left: 30%;
            top: 30%;
            width:280px;
            height: 300px;
            padding-left: 70px;
            /* border: 1px solid salmon; */
            box-shadow: 0 0 10px rgb(0 ,0 , 0 ,0.4);
            padding-top: 30px;
            /* padding-left: 30px;  */
            /* text-align: center;  */
            z-index: 10;
            background-color: #fff;
        }
        label{
            font-size: 14px;
            color: #333;
            font-weight: 600;
        }
        button{
            margin-top: 20px;
            background-color: salmon;
            /* border: 1px solid #fff; */
            /* color: #fff; */
            width: 100px;
            line-height: 20px;
            font-size: 14px;

        }
        .mask{
            display: none;
            background-color: rgba(0, 0, 0, 0.6); 
            width: 100%;
            height: 100%; 
            position: fixed;
            top: 0;
            left: 0;
        }
        a{
            cursor: pointer;
            color: rgb(51, 38, 167);
        }
    </style>
    <script src="./jquery-3.5.1.min.js"></script>
    <!-- <script src="../layDate-v5.0.9/laydate/laydate.js"></script> -->
    <script src="./add.js"></script>
</head>
<body>
    <!-- <form method="POST" action="/admin/add"> -->
        <div class="mask"></div>
        <div class="update-box">
            <div class="close-btn"
                style="position: absolute;right: -11px;top: -9px; border-radius: 50%; font-size: 10px;background-color: salmon; width: 28px;height: 28px;text-align: center;line-height: 28px;color: #fff;cursor: pointer;">
                关闭</div>
            <div class="col">
                <label>用户名：</label><input type='text' class="admin u_name" name='name' placeholder="用户名">
                <p class="uname-err" style="font-size: 12px; color: rgb(221, 12, 12); display: none;">请输入正确的用户名</p>
            </div>
            <div class="col">
                <label>年龄：</label><input type='text' class="admin u_age" name='age' placeholder="年龄">
            </div>
            <div class="col">
                <label>性别：</label>
                <input type='radio' class="admin u_sex u_sex_mam" name='男'>男
                <input type="radio" class="admin u_sex u_sex_women" name='女'>女
            </div>
            <div class="col">
                <label>手机号：</label><input type='text' class="admin u_phone" name='phone' placeholder="手机号">
                <span class="uphone-err" style="font-size: 12px; color: rgb(221, 12, 12); display: none;">请输入正确的手机号</span>
            </div>
            <div class="col">
                <label>邮箱：</label><input type="text" class="admin u_email" name="email" placeholder="邮箱">
            </div>
            <div class="col">
                <label>注册时间：</label><input class="admin date date-u" type='date' placeholder="请选择时间">
            </div>
            <div class="col">
                <label>爱好：</label>
                <input type="checkbox" name="看书" class="u_hobbies">看书
                <input type="checkbox" name="写作业" class="u_hobbies">写作业
                <input type="checkbox" name="玩手机" class="u_hobbies">玩手机
            </div>
            <div>
                <button type="submit" class="submit-btn">提交</button>
            </div>
        </div>
        <div class="input">
            <div>
                <label>用户名：</label><input type='text' class="admin username" name='name' placeholder="用户名">
                <span class="uname-err" style="font-size: 12px; color: rgb(221, 12, 12); display: none;">请输入正确的用户名</span>
            </div>
            <div>
                <label>年龄：</label><input type='text' class="admin age" name='age' placeholder="年龄">
            </div>
            <div>
                <label>性别：</label>
                <input type='radio' class="admin sex" name='男'>男
                <input type="radio" class="admin sex" name='女'>女
            </div>
            <div>
                <label>手机号：</label><input type='text' class="admin phone" name='phone' placeholder="手机号">
            </div>
            <div>
                <label>邮箱：</label><input type="text" class="admin email" name="email" placeholder="邮箱">
            </div>
            <div>
                <label>注册时间：</label><input class="admin date date-s" type='date' placeholder="请选择时间">
            </div>
            <div>
                <label>爱好：</label>
                <input type="checkbox" name="看书" class="hobbies">看书
                <input type="checkbox" name="写作业" class="hobbies">写作业
                <input type="checkbox" name="玩手机" class="hobbies">玩手机
            </div>
            <div>
                <button type="submit" class="btn" style="margin-left: 50px;">添加用户</button>
                <!-- <button type="submit" class="submit-btn">提交</button> -->
            </div>
        </div>
    <!-- </form> -->
     <div class="search">
         <p>输入搜索内容：<input type="text" class="search-input" placeholder="search..." style="display: inline-block; text-align: right;"></p>
         <p>开始时间：<input type="date" class="date date-l" placeholder="请选择时间"></p>

         <p>结束时间：<input type="date" class="date date-r" placeholder="请选择时间"></p>
         <button class="f_btn" style="width: 70px; margin: 0;">搜索</button>
     </div>
    <table class="box">
        <thead>
            <th><input type="checkbox" class="all_checkbox"></th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>手机号</th>
            <th>邮箱</th>
            <th>时间</th>
            <th>爱好</th>
            <th>修改</th>
            <th>删除</th>
            <!-- <th style="text-align: right; width: 150px;"><input type="text" class="search-input" placeholder="search..." style="display: inline-block;"></th>
            <th style="width: 250px;">
                <input type="date" class="date date-l" placeholder="请选择时间">&nbsp
                <input type="date" class="date date-r" placeholder="请选择时间">
            </th>
            <th></th> -->
        </thead>
        <tbody class="list_render"></tbody>
    </table>
</body>
</html>